<script setup lang="ts">
import { computed, reactive } from "vue";
import Taro, { useDidShow, useReachBottom } from "@tarojs/taro";

import ByTag from "@/components/ui/ByTag.vue";
import ByPage from "@/components/ui/ByPage.vue";
import BySpace from "@/components/ui/BySpace.vue";
import ByButton from "@/components/ui/ByButton.vue";
import CouponItem from "./components/CouponItem.vue";
import ViewList from "@/components/common/ViewList.vue";

import useApp from "@/stores/app";
import useList from "@/hooks/useList";
import ApiTicket from "@/api/ticket";

const tabs = [
  { label: "可转赠", value: 1 },
  { label: "使用中", value: 2 },
  { label: "不可用", value: -1 },
];

const tab2 = [
  { label: "已使用", value: 3 },
  { label: "转赠中", value: 4 },
  { label: "已转赠", value: 5 },
  { label: "已过期", value: 6 },
  { label: "已禁用", value: 7 },
];

const stateApp = useApp();
const isLogin = computed(() => !!stateApp.userInfo);

const search = reactive({ status: 1 });

const { loading, list, nextPage, resetToFirst } = useList(
  ApiTicket.getUserTicketList,
  {
    search,
    immediate: false,
    refreshDeps: search,
  }
);

useDidShow(() => isLogin.value && resetToFirst());
useReachBottom(() => nextPage());

// tab点击事件
const handleTabClick = ({ value }) => {
  search.status = value == -1 ? 3 : value;
};
// 第一级tab显示对比值
const showTabValue = computed(() => {
  const { status } = search;
  return status > 2 ? -1 : status;
});

// 窗口信息
const res = Taro.getWindowInfo();
const { safeArea } = res;
</script>

<template>
  <ByPage footer-fixed footer-safe :body-center="list.length == 0">
    <template #header>
      <view
        class="bg-[#fef7ee]"
        :style="`padding-top:${safeArea?.top || 56}px`"
        v-if="isLogin"
      >
        <view class="flex items-center bg-[#fef7ee] py-2 px-4">
          <view
            class="mr-3"
            v-for="item in tabs"
            :key="item.value"
            :class="[
              'flex-none rounded-full py-1.5 px-3',
              showTabValue === item.value
                ? 'bg-dark text-white'
                : 'text-primary',
            ]"
            @tap="handleTabClick(item)"
          >
            {{ item.label }}
          </view>
        </view>

        <template v-if="search.status > 2">
          <view class="border-t-1 border-primary mb-2" />

          <view class="px-3 pb-2">
            <BySpace>
              <ByTag
                v-for="item in tab2"
                rounded
                type="primary"
                :key="item.value"
                :plain="search.status !== item.value"
                @tap="handleTabClick(item)"
                >{{ item.label }}</ByTag
              >
            </BySpace>
          </view>
        </template>
      </view>
    </template>

    <template #footer>
      <view class="m-3 text-center" v-if="isLogin && search.status == 1">
        <ByButton class="w-1/2 bg-dark" to="/packageCoupon/pages/give"
          >转赠
        </ByButton>
      </view>
    </template>

    <ViewList
      :loading="loading"
      :isEmpty="list.length == 0"
      :empty-title="!isLogin ? '请登录' : undefined"
    >
      <CouponItem class="mx-3 mb-6" v-for="item in list" :source="item" />
    </ViewList>
  </ByPage>
</template>

<style lang="less">
/* 使用伪元素创建固定背景 */
page::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #fef7ee, #dec2a0);
  z-index: -1; /* 确保背景在内容下方 */
}
</style>
